<template>
  <div class="adminvideo" data-v-adminvideo>
    <div class="menu">
      <!-- <div class="menu-list">
        <span>视频ID</span>
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="searchForm.videoId"
          class="menu-item"
        >
        </el-input>
      </div> -->
      <div class="menu-list">
        <span>标题</span>
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="searchForm.title"
          class="menu-item"
        >
        </el-input>
      </div>
      <!-- <div class="menu-list">
        <span>用户ID</span>
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="searchForm.username"
          class="menu-item"
        >
        </el-input>
      </div> -->
      <div class="menu-list">
        <span>分类</span>
        <el-select v-model="searchForm.region" placeholder="请选择">
          <el-option
            v-for="item in regionOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="searchbtn">
        <el-button type="primary" @click="reSetVideo">重置</el-button>
        <el-button type="primary" icon="el-icon-search" @click="searchVideo"
          >搜索</el-button
        >
      </div>
    </div>

    <div class="content">
      <div class="table">
        <el-table :data="currentVideoList" style="width: 100%">
          <!-- <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" class="demo-table-expand">
              <el-form-item label="视频ID">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="视频标题">
                <span>{{ props.row.shop }}</span>
              </el-form-item>
              <el-form-item label="分区">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="简介">
                <span>{{ props.row.shopId }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column> -->

          <el-table-column label="视频 ID" prop="id" align="center" width="120">
          </el-table-column>
          <el-table-column
            label="发布者 ID"
            prop="video_issuer"
            align="center"
            width="160"
          >
          </el-table-column>
          <el-table-column label="视频标题" prop="title" align="center">
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            label="简介"
            prop="video_desc"
            align="center"
          >
          </el-table-column>
          <el-table-column
            label="发布时间"
            prop="upload_date"
            align="center"
            width="180"
          >
          </el-table-column>

          <el-table-column label="操作" align="center" width="200">
            <template slot-scope="scope">
              <el-button size="mini" @click="openVideo(scope.$index, scope.row)"
                >查看视频</el-button
              >
              <el-button
                size="mini"
                type="primary"
                @click="toexamine(scope.$index, scope.row)"
                >审核</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          layout="prev, pager, next"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>

    <div class="video-dialog" v-show="videoDisabled">
      <div class="video-box">
        <video ref="myvideo" id="myvideo" class="video" controls>
          <source type="video/mp4" />
          <source type="video/ogg" />
          您的浏览器不支持Video标签。
        </video>
        <div class="dialog-close">
          <i class="el-icon-close" @click="closeDialog"></i>
        </div>
      </div>
    </div>

    <el-dialog title="提示" :visible.sync="DialogVisible" width="30%">
      <span>选择是否通过该视频的审核</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateReview(-1)">拒 绝</el-button>
        <el-button type="primary" @click="updateReview(1)">通 过</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "AdminVideo",
  data: function () {
    return {
      searchForm: {
        videoId: "",
        title: "",
        username: "",
        region: "",
      },

      regionOptions: [
        {
          value: 0,
          label: "音乐",
        },
        {
          value: 1,
          label: "游戏",
        },
        {
          value: 2,
          label: "动漫",
        },
        {
          value: 3,
          label: "美食",
        },
      ],

      // 未审核的视频列表
      videoList: [],
      currentVideoList: [],

      total: 0,
      pageSize: 11,
      currentPage: 1,

      // 视频弹窗
      videoDisabled: false,
      videoUrl: "",

      DialogVisible: false,
      currentReviewId: "",
    };
  },

  created() {
    this.getVideoList();
  },

  methods: {
    openVideo(index, row) {
      this.videoDisabled = true;
      this.$refs.myvideo.src = row.video;
    },

    closeDialog() {
      this.videoDisabled = false;
      this.$refs.myvideo.pause();
    },

    toexamine(index, row) {
      // console.log(index, row);
      this.currentReviewId = row.id;
      this.DialogVisible = true;
    },

    getVideoList() {
      this.axios
        .get("admin/underReview")
        .then((response) => {
          if (response.data.status === 200) {
            // console.log(response);
            this.videoList = response.data.data;
            this.total = response.data.total;

            this.currentVideoList = this.videoList.slice(
              (this.currentPage - 1) * this.pageSize,
              (this.currentPage - 1) * this.pageSize + this.pageSize
            );
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;

      let start = (val - 1) * this.pageSize;
      this.currentVideoList = this.videoList.slice(
        start,
        start + this.pageSize
      );
    },

    searchVideo() {
      // console.log(this.searchForm);

      this.axios
        .get("admin/searchVideo", {
          params: {
            id: this.searchForm.videoId,
            title: this.searchForm.title,
            video_issuer: this.searchForm.username,
            region: this.searchForm.region,
          },
        })
        .then((response) => {
          if (response.data.status === 200) {
            // console.log(response);
            this.videoList = response.data.data;
            this.total = response.data.total;
            this.currentVideoList = this.videoList.slice(0, 0 + this.pageSize);
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    reSetVideo() {
      this.searchForm = {
        videoId: "",
        title: "",
        username: "",
        region: "",
      };
      this.getVideoList();
    },

    updateReview(status) {
      // console.log(status, this.currentReviewId);
      this.axios
        .post("admin/updateReview", {
          pass: status,
          id: this.currentReviewId,
        })
        .then((response) => {
          if (response.data.status === 200) {
            // console.log(response);
            this.DialogVisible = false;

            this.$message({
              message: response.data.msg,
              type: "success",
            });

            if (this.currentVideoList.length === 1) {
              // console.log(this.currentPage);
              if (this.currentPage > 1) {
                this.currentPage--;
              }
              this.getVideoList();
            } else {
              this.getVideoList();
            }
          } else {
            console.log(response);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss">
.el-tooltip__popper {
  max-width: 30vw;
  font-size: 16px;
}
</style>>

<style lang="scss" scoped>
.adminvideo[data-v-adminvideo] {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 18px;

  .menu {
    display: flex;
    width: 100%;
    height: 80px;
    padding: 0 10px;
    background-color: #e3e3e3;

    .menu-list {
      display: flex;
      align-items: center;
      margin-right: 18px;

      span {
        font-size: 18px;
        margin-right: 16px;
      }

      // .menu-item {
      //   flex: 1;
      // }
    }

    .searchbtn {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #e3e3e3;

    .table {
      width: 100%;
      flex: 1;
    }

    .pagination {
      display: flex;
      align-items: center;
      width: 100%;
      height: 40px;
    }
  }

  .video-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    width: 1120px;
    height: 630px;
    background-color: #000;
    z-index: 2000;

    .video-box {
      position: relative;
      width: 100%;
      height: 100%;

      .video {
        width: 100%;
        height: 100%;
      }

      .dialog-close {
        position: absolute;
        top: 10px;
        right: 10px;

        i {
          font-size: 24px;
          color: #e3e3e3;
          cursor: pointer;
        }
      }
    }
  }
}
</style>